<script setup lang="ts">
import { computed, ref } from 'vue';

import { Icon as IconifyIcon } from '@iconify/vue';

import { Card, Input, Tabs, TabPane, message } from 'ant-design-vue';
import { Search, Copy } from 'lucide-vue-next';

// 图标库配置（从 icon-picker 组件复制）
const iconSets: Record<string, { name: string; prefix: string; description: string; icons: string[] }> = {
  lucide: {
    name: 'Lucide Icons',
    prefix: 'lucide',
    description: '现代、简洁的设计风格，一致的线条粗细',
    icons: [
      'home', 'user', 'settings', 'search', 'menu', 'x', 'check', 'chevron-down', 'chevron-up', 'chevron-left', 'chevron-right',
      'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down', 'plus', 'minus', 'edit', 'trash', 'save', 'download', 'upload',
      'file', 'folder', 'image', 'video', 'music', 'mail', 'phone', 'calendar', 'clock', 'bell', 'star', 'heart', 'bookmark',
      'tag', 'flag', 'lock', 'unlock', 'eye', 'eye-off', 'share', 'link', 'external-link', 'copy', 'clipboard', 'scissors',
      'filter', 'refresh-cw', 'rotate-cw', 'rotate-ccw', 'zoom-in', 'zoom-out', 'maximize', 'minimize', 'move', 'grid',
      'list', 'layout', 'sidebar', 'columns', 'rows', 'table', 'database', 'server', 'cloud', 'hard-drive', 'cpu', 'monitor',
      'smartphone', 'tablet', 'laptop', 'printer', 'camera', 'mic', 'volume', 'volume-x', 'wifi', 'bluetooth', 'battery',
      'power', 'zap', 'sun', 'moon', 'cloud-rain', 'cloud-snow', 'wind', 'droplet', 'thermometer', 'umbrella',
      'map', 'map-pin', 'navigation', 'compass', 'globe', 'send', 'inbox', 'archive', 'package', 'shopping-cart', 'shopping-bag',
      'credit-card', 'dollar-sign', 'percent', 'trending-up', 'trending-down', 'bar-chart', 'pie-chart', 'activity', 'award',
      'briefcase', 'users', 'user-plus', 'user-minus', 'user-check', 'user-x', 'shield', 'key', 'log-in', 'log-out',
      'help-circle', 'info', 'alert-circle', 'alert-triangle', 'check-circle', 'x-circle', 'slash', 'loader', 'more-horizontal',
      'more-vertical', 'code', 'terminal', 'git-branch', 'git-commit', 'git-merge', 'git-pull-request', 'github', 'gitlab',
      'play', 'pause', 'stop', 'skip-back', 'skip-forward', 'fast-forward', 'rewind', 'repeat', 'shuffle', 'volume-2',
      'workflow', 'layers', 'box', 'package', 'archive', 'inbox', 'send', 'file-text', 'file-plus', 'file-minus',
      'folder-plus', 'folder-minus', 'book', 'book-open', 'bookmark', 'tag', 'hash', 'at-sign', 'message-circle', 'message-square',
      'command', 'option', 'target', 'crosshair', 'aperture', 'anchor', 'feather', 'paperclip', 'pen-tool', 'tool',
    ],
  },
  ep: {
    name: 'Element Plus Icons',
    prefix: 'ep',
    description: 'Element Plus 官方图标库，适合企业级应用',
    icons: [
      'add-location', 'aim', 'alarm-clock', 'apple', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'avatar',
      'back', 'bell', 'bicycle', 'bottom', 'bottom-left', 'bottom-right', 'briefcase', 'brush', 'bucket', 'calendar',
      'camera', 'caret-bottom', 'caret-left', 'caret-right', 'caret-top', 'cellphone', 'chat-dot-round', 'chat-dot-square',
      'chat-line-round', 'chat-line-square', 'chat-round', 'chat-square', 'check', 'checked', 'cherry', 'chicken',
      'circle-check', 'circle-close', 'circle-plus', 'circle-plus-filled', 'clock', 'close', 'close-bold', 'cloudy',
      'coffee', 'coffee-cup', 'coin', 'cold-drink', 'collection', 'collection-tag', 'comment', 'compass', 'connection',
      'coordinate', 'copy-document', 'cpu', 'credit-card', 'crop', 'd-arrow-left', 'd-arrow-right', 'd-caret', 'data-analysis',
      'data-board', 'data-line', 'delete', 'delete-filled', 'delete-location', 'dessert', 'discount', 'dish', 'dish-dot',
      'document', 'document-add', 'document-checked', 'document-copy', 'document-delete', 'document-remove', 'download',
      'drizzling', 'edit', 'edit-pen', 'eleme', 'eleme-filled', 'element-plus', 'expand', 'failed', 'female', 'files',
      'film', 'filter', 'finished', 'first-aid-kit', 'flag', 'fold', 'folder', 'folder-add', 'folder-checked', 'folder-delete',
      'folder-opened', 'folder-remove', 'food', 'football', 'fork-spoon', 'fries', 'full-screen', 'goblet', 'goblet-full',
      'goblet-square', 'goblet-square-full', 'gold-medal', 'goods', 'goods-filled', 'grape', 'grid', 'guide', 'headset',
      'help', 'help-filled', 'hide', 'histogram', 'home-filled', 'hot-water', 'house', 'ice-cream', 'ice-cream-round',
      'ice-cream-square', 'ice-drink', 'ice-tea', 'info', 'info-filled', 'iphone', 'key', 'knife-fork', 'lightning',
      'link', 'list', 'loading', 'location', 'location-filled', 'location-information', 'lock', 'lollipop', 'magic-stick',
      'magnet', 'male', 'management', 'map-location', 'medal', 'menu', 'message', 'message-box', 'mic', 'microphone',
      'milk-tea', 'minus', 'money', 'monitor', 'moon', 'moon-night', 'more', 'more-filled', 'mostly-cloudy', 'mouse',
    ],
  },
  mdi: {
    name: 'Material Design Icons',
    prefix: 'mdi',
    description: 'Google Material Design 风格，丰富的图标种类',
    icons: [
      'account', 'account-circle', 'account-group', 'account-multiple', 'alert', 'alert-circle', 'alert-octagon', 'apps',
      'archive', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'attachment', 'bell', 'bookmark', 'calendar',
      'camera', 'cancel', 'chart-bar', 'chart-line', 'chart-pie', 'check', 'check-circle', 'chevron-down', 'chevron-left',
      'chevron-right', 'chevron-up', 'clock', 'close', 'close-circle', 'cloud', 'cloud-download', 'cloud-upload', 'code-tags',
      'cog', 'comment', 'content-copy', 'content-cut', 'content-paste', 'content-save', 'database', 'delete', 'download',
      'drag', 'earth', 'email', 'eye', 'eye-off', 'file', 'file-document', 'filter', 'folder', 'folder-open', 'format-bold',
      'format-italic', 'format-underline', 'forum', 'fullscreen', 'fullscreen-exit', 'grid', 'heart', 'help-circle', 'home',
      'image', 'information', 'key', 'label', 'layers', 'link', 'list', 'lock', 'lock-open', 'logout', 'magnify', 'map',
      'map-marker', 'menu', 'message', 'minus', 'monitor', 'more', 'music', 'note', 'notification', 'open-in-new', 'palette',
      'pause', 'pencil', 'phone', 'play', 'plus', 'power', 'printer', 'refresh', 'reload', 'reply', 'save', 'search',
      'send', 'settings', 'share', 'shield', 'shopping', 'sort', 'star', 'stop', 'table', 'tag', 'text', 'thumb-up',
      'timer', 'trash-can', 'trending-down', 'trending-up', 'undo', 'upload', 'video', 'view-grid', 'view-list', 'volume-high',
      'volume-off', 'wallet', 'web', 'wifi', 'window-close', 'window-maximize', 'window-minimize', 'wrench', 'zip-box',
      'state-machine', 'source-branch', 'source-merge', 'source-pull', 'source-commit', 'git', 'github', 'gitlab',
      'workflow', 'sitemap', 'network', 'lan', 'router', 'server-network', 'timeline', 'timeline-text', 'timeline-clock',
      'progress-check', 'progress-clock', 'progress-close', 'progress-download', 'progress-upload', 'checkbox-marked-circle',
      'checkbox-blank-circle', 'radiobox-marked', 'radiobox-blank', 'toggle-switch', 'toggle-switch-off', 'file-tree',
      'folder-network', 'folder-account', 'folder-cog', 'folder-key', 'folder-lock', 'folder-star', 'folder-upload',
      'file-chart', 'file-code', 'file-excel', 'file-image', 'file-pdf', 'file-powerpoint', 'file-word', 'file-video',
    ],
  },
  antd: {
    name: 'Ant Design Icons',
    prefix: 'ant-design',
    description: 'Ant Design 官方图标库，最丰富的图标集合',
    icons: [
      'home', 'setting', 'user', 'team', 'menu', 'appstore', 'dashboard', 'project', 'apartment', 'table', 'form',
      'calendar', 'clock-circle', 'check-circle', 'close-circle', 'exclamation-circle', 'info-circle', 'question-circle',
      'warning', 'stop', 'plus-circle', 'minus-circle', 'left-circle', 'right-circle', 'up-circle', 'down-circle',
      'play-circle', 'pause-circle', 'fast-forward', 'fast-backward', 'step-forward', 'step-backward', 'caret-up',
      'caret-down', 'caret-left', 'caret-right', 'up', 'down', 'left', 'right', 'arrow-up', 'arrow-down', 'arrow-left',
      'arrow-right', 'double-left', 'double-right', 'vertical-left', 'vertical-right', 'forward', 'backward', 'rollback',
      'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'zoom-in', 'zoom-out', 'fullscreen', 'fullscreen-exit',
      'search', 'scan', 'qrcode', 'barcode', 'filter', 'reload', 'sync', 'undo', 'redo', 'edit', 'delete', 'copy',
      'scissor', 'save', 'download', 'upload', 'cloud-download', 'cloud-upload', 'cloud-sync', 'cloud-server', 'cloud',
      'file', 'file-text', 'file-add', 'file-excel', 'file-exclamation', 'file-pdf', 'file-image', 'file-markdown',
      'file-unknown', 'file-ppt', 'file-word', 'file-zip', 'folder', 'folder-open', 'folder-add', 'folder-view',
      'database', 'container', 'hdd', 'usb', 'inbox', 'read', 'unordered-list', 'ordered-list', 'align-left', 'align-center',
      'align-right', 'bold', 'italic', 'underline', 'strikethrough', 'font-colors', 'font-size', 'line-height', 'bg-colors',
      'link', 'paper-clip', 'picture', 'camera', 'video-camera', 'audio', 'notification', 'sound', 'bell', 'message',
      'mail', 'phone', 'mobile', 'contacts', 'solution', 'book', 'profile', 'idcard', 'credit-card', 'wallet', 'calculator',
      'gift', 'shopping-cart', 'shopping', 'shop', 'rocket', 'car', 'environment', 'compass', 'global', 'pushpin', 'flag',
      'tag', 'tags', 'star', 'heart', 'like', 'dislike', 'smile', 'frown', 'meh', 'fire', 'thunderbolt', 'trophy',
      'crown', 'skin', 'eye', 'eye-invisible', 'lock', 'unlock', 'safety-certificate', 'key', 'api', 'disconnect',
      'wifi', 'usb', 'bluetooth', 'radar-chart', 'heat-map', 'fall', 'rise', 'stock', 'box-plot', 'fund', 'sliders',
      'android', 'apple', 'windows', 'ie', 'chrome', 'github', 'aliwangwang', 'dingding', 'weibo-square', 'weibo-circle',
      'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq',
      'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus', 'dropbox', 'facebook', 'codepen', 'code-sandbox',
      'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', 'ant-cloud', 'aliyun', 'zhihu', 'slack', 'slack-square',
      'behance', 'behance-square', 'dribbble', 'dribbble-square', 'instagram', 'yuque', 'alibaba', 'yahoo', 'reddit',
      'sketch', 'account-book', 'alert', 'apartment', 'api', 'appstore-add', 'audio', 'audit', 'bank', 'bar-chart',
      'barcode', 'bars', 'bell', 'block', 'book', 'border', 'border-bottom', 'border-horizontal', 'border-inner',
      'border-left', 'border-outer', 'border-right', 'border-top', 'border-verticle', 'branches', 'bug', 'build',
      'bulb', 'calculator', 'calendar', 'camera', 'car', 'carry-out', 'check', 'check-square', 'ci', 'clear',
      'cloud', 'cluster', 'code', 'coffee', 'column-height', 'column-width', 'comment', 'compass', 'compress',
      'console-sql', 'contacts', 'container', 'control', 'copy', 'copyright', 'credit-card', 'crown', 'customer-service',
      'dash', 'dashboard', 'database', 'delete-column', 'delete-row', 'delivered-procedure', 'deployment-unit', 'desktop',
      'diff', 'dingding', 'disconnect', 'dislike', 'dollar', 'dot-chart', 'double-left', 'double-right', 'down',
      'down-square', 'download', 'drag', 'edit', 'ellipsis', 'enter', 'environment', 'euro', 'exception', 'exclamation',
      'expand', 'expand-alt', 'experiment', 'export', 'eye', 'fall', 'fast-backward', 'fast-forward', 'field-binary',
      'field-number', 'field-string', 'field-time', 'file-add', 'file-done', 'file-exclamation', 'file-jpg', 'file-markdown',
    ],
  },
  tabler: {
    name: 'Tabler Icons',
    prefix: 'tabler',
    description: '专为现代 Web 应用设计，最丰富的工作流图标',
    icons: [
      'home', 'user', 'settings', 'search', 'menu', 'x', 'check', 'chevron-down', 'chevron-up', 'chevron-left', 'chevron-right',
      'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down', 'plus', 'minus', 'edit', 'trash', 'save', 'download', 'upload',
      'file', 'folder', 'image', 'video', 'music', 'mail', 'phone', 'calendar', 'clock', 'bell', 'star', 'heart', 'bookmark',
      'tag', 'flag', 'lock', 'unlock', 'eye', 'eye-off', 'share', 'link', 'external-link', 'copy', 'clipboard', 'scissors',
      'filter', 'refresh', 'rotate', 'rotate-clockwise', 'zoom-in', 'zoom-out', 'maximize', 'minimize', 'move', 'grid',
      'list', 'layout', 'sidebar', 'columns', 'rows', 'table', 'database', 'server', 'cloud', 'hard-drive', 'cpu', 'device-desktop',
      'device-mobile', 'device-tablet', 'device-laptop', 'printer', 'camera', 'microphone', 'volume', 'volume-off', 'wifi', 'bluetooth',
      'battery', 'plug', 'bolt', 'sun', 'moon', 'cloud-rain', 'cloud-snow', 'wind', 'droplet', 'temperature', 'umbrella',
      'map', 'map-pin', 'navigation', 'compass', 'world', 'send', 'inbox', 'archive', 'package', 'shopping-cart', 'shopping-bag',
      'credit-card', 'currency-dollar', 'percentage', 'trending-up', 'trending-down', 'chart-bar', 'chart-pie', 'chart-line',
      'chart-area', 'chart-dots', 'award', 'briefcase', 'users', 'user-plus', 'user-minus', 'user-check', 'user-x', 'shield',
      'key', 'login', 'logout', 'help', 'info-circle', 'alert-circle', 'alert-triangle', 'circle-check', 'circle-x', 'loader',
      'dots', 'dots-vertical', 'code', 'terminal', 'git-branch', 'git-commit', 'git-merge', 'git-pull-request', 'brand-github',
      'brand-gitlab', 'player-play', 'player-pause', 'player-stop', 'player-skip-back', 'player-skip-forward', 'repeat', 'shuffle',
      'workflow', 'layers', 'box', 'package', 'archive', 'inbox', 'send', 'file-text', 'file-plus', 'file-minus', 'folder-plus',
      'folder-minus', 'book', 'book-open', 'bookmark', 'tag', 'hash', 'at', 'message', 'message-circle', 'command', 'target',
      'crosshair', 'aperture', 'anchor', 'feather', 'paperclip', 'pencil', 'tool', 'sitemap', 'timeline', 'arrows-split',
      'arrows-join', 'arrows-merge', 'arrows-fork', 'circle-dot', 'circle-dotted', 'square-dot', 'diamond', 'hexagon',
      'octagon', 'pentagon', 'triangle', 'circle', 'square', 'rectangle', 'oval', 'polygon', 'shape', 'shape-2', 'shape-3',
      'report', 'report-analytics', 'report-medical', 'report-money', 'report-search', 'chart-arrows', 'chart-arrows-vertical',
      'chart-bubble', 'chart-candle', 'chart-donut', 'chart-infographic', 'chart-radar', 'chart-sankey', 'chart-treemap',
      'activity', 'adjustments', 'adjustments-alt', 'adjustments-horizontal', 'affiliate', 'alarm', 'album', 'alert-octagon',
      'align-center', 'align-justified', 'align-left', 'align-right', 'ambulance', 'anchor', 'angle', 'antenna', 'antenna-bars',
      'aperture', 'api', 'app-window', 'apple', 'apps', 'archive', 'armchair', 'arrow-autofit-content', 'arrow-autofit-down',
      'arrow-autofit-height', 'arrow-autofit-left', 'arrow-autofit-right', 'arrow-autofit-up', 'arrow-autofit-width',
      'arrow-back', 'arrow-back-up', 'arrow-badge-down', 'arrow-badge-left', 'arrow-badge-right', 'arrow-badge-up',
      'arrow-bar-down', 'arrow-bar-left', 'arrow-bar-right', 'arrow-bar-to-down', 'arrow-bar-to-left', 'arrow-bar-to-right',
      'arrow-bar-to-up', 'arrow-bar-up', 'arrow-bear-left', 'arrow-bear-right', 'arrow-big-down', 'arrow-big-left',
      'arrow-big-right', 'arrow-big-up', 'arrow-bounce', 'arrow-curve-left', 'arrow-curve-right', 'arrow-down-circle',
      'arrow-down-left', 'arrow-down-left-circle', 'arrow-down-right', 'arrow-down-right-circle', 'arrow-forward',
      'arrow-forward-up', 'arrow-left-circle', 'arrow-left-right', 'arrow-loop-left', 'arrow-loop-right', 'arrow-merge',
      'arrow-narrow-down', 'arrow-narrow-left', 'arrow-narrow-right', 'arrow-narrow-up', 'arrow-ramp-left', 'arrow-ramp-right',
      'arrow-right-circle', 'arrow-rotary-first-left', 'arrow-rotary-first-right', 'arrow-rotary-last-left',
      'arrow-rotary-last-right', 'arrow-rotary-left', 'arrow-rotary-right', 'arrow-rotary-straight', 'arrow-sharp-turn-left',
      'arrow-sharp-turn-right', 'arrow-up-circle', 'arrow-up-left', 'arrow-up-left-circle', 'arrow-up-right',
      'arrow-up-right-circle', 'arrow-wave-left-down', 'arrow-wave-left-up', 'arrow-wave-right-down', 'arrow-wave-right-up',
      'arrows-diagonal', 'arrows-diagonal-2', 'arrows-diagonal-minimize', 'arrows-diagonal-minimize-2', 'arrows-double-ne-sw',
      'arrows-double-nw-se', 'arrows-double-se-nw', 'arrows-double-sw-ne', 'arrows-down', 'arrows-down-up', 'arrows-exchange',
      'arrows-horizontal', 'arrows-left', 'arrows-left-down', 'arrows-left-right', 'arrows-maximize', 'arrows-minimize',
      'arrows-move', 'arrows-move-horizontal', 'arrows-move-vertical', 'arrows-random', 'arrows-right', 'arrows-right-down',
      'arrows-right-left', 'arrows-shuffle', 'arrows-sort', 'arrows-transfer-down', 'arrows-transfer-up', 'arrows-up',
      'arrows-up-down', 'arrows-up-left', 'arrows-up-right', 'arrows-vertical', 'artboard', 'aspect-ratio', 'assembly',
    ],
  },
};

const searchText = ref('');
const activeTab = ref('lucide');

// 计算过滤后的图标
const filteredIcons = computed(() => {
  const currentSet = iconSets[activeTab.value];
  if (!currentSet) return [];

  if (!searchText.value) {
    return currentSet.icons;
  }

  const keyword = searchText.value.toLowerCase();
  return currentSet.icons.filter(icon => icon.toLowerCase().includes(keyword));
});

// 复制图标名称
function copyIconName(iconName: string) {
  const fullName = `${iconSets[activeTab.value].prefix}:${iconName}`;
  navigator.clipboard.writeText(fullName).then(() => {
    message.success(`已复制: ${fullName}`);
  });
}
</script>

<template>
  <div class="p-4">
    <Card title="图标库展示" class="mb-4">
      <template #extra>
        <div class="text-sm text-gray-500">
          共 5 个图标库，1000+ 个图标
        </div>
      </template>

      <div class="mb-4">
        <Input
          v-model:value="searchText"
          placeholder="搜索图标名称..."
          allow-clear
          size="large"
        >
          <template #prefix>
            <Search :size="20" />
          </template>
        </Input>
      </div>

      <div class="mb-4 rounded-lg bg-blue-50 p-4">
        <h3 class="mb-2 text-lg font-semibold text-blue-900">使用说明</h3>
        <ul class="space-y-1 text-sm text-blue-800">
          <li>• 点击图标可复制其完整名称（格式：prefix:icon-name）</li>
          <li>• 在菜单管理中使用图标选择器可快速选择图标</li>
          <li>• 所有图标都支持自定义大小和颜色</li>
          <li>• 特别推荐 Tabler 和 Ant Design 图标库用于工作流场景</li>
        </ul>
      </div>

      <Tabs v-model:active-key="activeTab" size="large">
        <TabPane
          v-for="(set, key) in iconSets"
          :key="key"
          :tab="`${set.name} (${set.icons.length})`"
        >
          <div class="mb-4 rounded-lg bg-gray-50 p-4">
            <div class="text-sm text-gray-600">{{ set.description }}</div>
            <div class="mt-2 text-xs text-gray-500">
              共 {{ set.icons.length }} 个图标
              <span v-if="searchText">，找到 {{ filteredIcons.length }} 个匹配图标</span>
            </div>
          </div>

          <!-- 图标网格 -->
          <div v-if="filteredIcons.length > 0" class="grid grid-cols-8 gap-2 md:grid-cols-10 lg:grid-cols-12">
            <div
              v-for="icon in filteredIcons"
              :key="icon"
              class="flex cursor-pointer flex-col items-center justify-center rounded-lg border border-gray-200 p-3 transition-all hover:border-blue-400 hover:bg-blue-50 hover:shadow-md"
              :title="`${set.prefix}:${icon}`"
              @click="copyIconName(icon)"
            >
              <IconifyIcon :icon="`${set.prefix}:${icon}`" class="text-2xl text-gray-700" />
              <span class="mt-1 text-xs text-gray-500 truncate w-full text-center">{{ icon }}</span>
            </div>
          </div>

          <!-- 无结果提示 -->
          <div v-else class="py-12 text-center text-gray-400">
            <IconifyIcon icon="lucide:search-x" class="mb-4 text-6xl" />
            <p class="text-lg">未找到匹配的图标</p>
            <p class="mt-2 text-sm">请尝试其他关键词</p>
          </div>
        </TabPane>
      </Tabs>
    </Card>

    <Card title="工作流场景推荐图标" class="mb-4">
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <!-- 流程节点 -->
        <div class="rounded-lg border p-4">
          <h4 class="mb-3 font-semibold text-gray-700">流程节点</h4>
          <div class="space-y-2 text-sm">
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:player-play" class="text-xl text-green-500" />
              <span>开始节点</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:player-stop" class="text-xl text-red-500" />
              <span>结束节点</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:user-check" class="text-xl text-blue-500" />
              <span>审批节点</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:git-branch" class="text-xl text-purple-500" />
              <span>条件节点</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:arrows-split" class="text-xl text-orange-500" />
              <span>并行节点</span>
            </div>
          </div>
        </div>

        <!-- 流程状态 -->
        <div class="rounded-lg border p-4">
          <h4 class="mb-3 font-semibold text-gray-700">流程状态</h4>
          <div class="space-y-2 text-sm">
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:loader" class="text-xl text-blue-500" />
              <span>进行中</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:circle-check" class="text-xl text-green-500" />
              <span>已完成</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:circle-x" class="text-xl text-red-500" />
              <span>已拒绝</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:clock" class="text-xl text-yellow-500" />
              <span>待处理</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:player-pause" class="text-xl text-gray-500" />
              <span>已暂停</span>
            </div>
          </div>
        </div>

        <!-- 流程操作 -->
        <div class="rounded-lg border p-4">
          <h4 class="mb-3 font-semibold text-gray-700">流程操作</h4>
          <div class="space-y-2 text-sm">
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:send" class="text-xl text-blue-500" />
              <span>提交</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:reload" class="text-xl text-orange-500" />
              <span>撤回</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:share" class="text-xl text-green-500" />
              <span>转发</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:arrow-back" class="text-xl text-red-500" />
              <span>驳回</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:edit" class="text-xl text-purple-500" />
              <span>编辑</span>
            </div>
          </div>
        </div>

        <!-- 流程管理 -->
        <div class="rounded-lg border p-4">
          <h4 class="mb-3 font-semibold text-gray-700">流程管理</h4>
          <div class="space-y-2 text-sm">
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:workflow" class="text-xl text-blue-500" />
              <span>流程设计</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:chart-line" class="text-xl text-green-500" />
              <span>流程监控</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:timeline" class="text-xl text-purple-500" />
              <span>流程历史</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:settings" class="text-xl text-gray-500" />
              <span>流程配置</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="ant-design:project" class="text-xl text-orange-500" />
              <span>项目管理</span>
            </div>
          </div>
        </div>

        <!-- 数据分析 -->
        <div class="rounded-lg border p-4">
          <h4 class="mb-3 font-semibold text-gray-700">数据分析</h4>
          <div class="space-y-2 text-sm">
            <div class="flex items-center gap-2">
              <IconifyIcon icon="ant-design:bar-chart" class="text-xl text-blue-500" />
              <span>柱状图</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="ant-design:pie-chart" class="text-xl text-green-500" />
              <span>饼图</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="ant-design:line-chart" class="text-xl text-purple-500" />
              <span>折线图</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="ant-design:dashboard" class="text-xl text-orange-500" />
              <span>仪表盘</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="tabler:report-analytics" class="text-xl text-red-500" />
              <span>分析报告</span>
            </div>
          </div>
        </div>

        <!-- 系统功能 -->
        <div class="rounded-lg border p-4">
          <h4 class="mb-3 font-semibold text-gray-700">系统功能</h4>
          <div class="space-y-2 text-sm">
            <div class="flex items-center gap-2">
              <IconifyIcon icon="ant-design:setting" class="text-xl text-gray-500" />
              <span>系统设置</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="ant-design:user" class="text-xl text-blue-500" />
              <span>用户管理</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="ant-design:team" class="text-xl text-green-500" />
              <span>角色管理</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="ant-design:menu" class="text-xl text-purple-500" />
              <span>菜单管理</span>
            </div>
            <div class="flex items-center gap-2">
              <IconifyIcon icon="ant-design:safety-certificate" class="text-xl text-red-500" />
              <span>权限管理</span>
            </div>
          </div>
        </div>
      </div>
    </Card>

    <Card title="快速参考">
      <div class="space-y-4">
        <div>
          <h4 class="mb-2 font-semibold text-gray-700">图标格式</h4>
          <div class="rounded bg-gray-100 p-3 font-mono text-sm">
            prefix:icon-name
          </div>
          <p class="mt-2 text-sm text-gray-600">
            例如: lucide:workflow, ant-design:project, tabler:git-branch
          </p>
        </div>

        <div>
          <h4 class="mb-2 font-semibold text-gray-700">在代码中使用</h4>
          <div class="rounded bg-gray-100 p-3 font-mono text-sm">
            &lt;IconifyIcon icon="tabler:workflow" class="text-2xl" /&gt;
          </div>
        </div>

        <div>
          <h4 class="mb-2 font-semibold text-gray-700">推荐图标库</h4>
          <ul class="space-y-1 text-sm text-gray-600">
            <li>• <strong>工作流场景</strong>: Tabler Icons (最丰富的工作流图标)</li>
            <li>• <strong>企业应用</strong>: Ant Design Icons (最全面的图标集)</li>
            <li>• <strong>现代设计</strong>: Lucide Icons (简洁优雅)</li>
            <li>• <strong>Material 风格</strong>: Material Design Icons</li>
            <li>• <strong>Element 风格</strong>: Element Plus Icons</li>
          </ul>
        </div>
      </div>
    </Card>
  </div>
</template>

<style scoped>
:deep(.ant-card-head-title) {
  font-size: 18px;
  font-weight: 600;
}
</style>

